<template>
	<layout>
		<!-- 顶部标题 -->
		<head :title="title"></head>
		<!-- 轮播图区域 -->
		<carousel></carousel>
		<!-- 温馨提醒区域 -->
		<title-bar></title-bar>

		<!-- 主要功能区 -->
		<view class="main">
			<view class="function-card" @click="handleSearch" hover-class="card-hover">
				<view class="card-content">
					<image class="icon" src="/static/images/mwcx.png"></image>
					<text class="card-title">墓位查询</text>
					<text class="card-desc">快速定位 便捷寻访</text>
				</view>
				<view class="card-decoration"></view>
				<view class="card-shine"></view>
			</view>

			<view class="function-card" @click="handleManageFee" hover-class="card-hover">
				<view class="card-content">
					<image class="icon" src="/static/images/glfxj.png"></image>
					<text class="card-title">管理费续交</text>
					<text class="card-desc">在线缴费 安心托管</text>
				</view>
				<view class="card-decoration"></view>
				<view class="card-shine"></view>
			</view>
		</view>

		<!-- 公告区域 -->
		<view class="notices">
			<view class="notice-header">
				<view class="notice-title-wrapper">
					<view class="notice-title">墓园公告</view>
					<view class="notice-subtitle">Cemetery Announcements</view>
				</view>
				<view class="refresh-indicator" :class="{ refreshing: isRefreshing }">
					<view class="refresh-circle"></view>
					<text class="refresh-time">{{ remaining }}s</text>
				</view>
			</view>
			<scroll-view class="notice-content" scroll-y>
				<view class="notice-item" v-for="(item, index) in messageList" :key="index" :style="{ animationDelay: index * 0.1 + 's' }" :class="{ 'refresh-animate': isRefreshing }">
					<view class="notice-tag" :class="item.xxlxKey">
						<view class="tag-dot"></view>
						{{ item.xxlx }}
					</view>
					<view class="notice-main">
						<text class="notice-text">{{ item.xxbt }}</text>
						<text class="notice-date">{{ getTime(item.createdTime) }}</text>
					</view>
				</view>
			</scroll-view>
			<view class="notice-footer">
				<view class="notice-line"></view>
				<view class="notice-dot"></view>
				<view class="notice-line"></view>
			</view>
		</view>

		<!-- 底部信息 -->
		<view class="footer">
			<view class="footer-content">
				<view class="contact">
					<view class="contact-title">
						<text class="title-text">联系我们</text>
						<text class="title-en">Contact Us</text>
					</view>
					<view class="contact-info">
						<view class="info-item">
							<uni-icons type="phone" size="12"></uni-icons>
							<view class="info-text" v-for="(item, index) in contactInfo">{{ item }}</view>
						</view>
						<view class="info-item" v-if="false">
							<uni-icons type="location" size="12"></uni-icons>
							<text class="info-text">地址：XX市XX区XX路XX号</text>
						</view>
					</view>
				</view>

				<view class="divider"></view>

				<view class="qrcode">
					<image class="qrcode-img" src="/static/images/jnl-xcx.jpg"></image>
					<text class="qrcode-text">扫码关注小程序</text>
				</view>
			</view>
		</view>
		<version-number :version="version" @checkUpdate="handleCheckUpdate"></version-number>
		<update ref="updateRef" @hasNewVersion="handleHasNewVersion" @noNewVersion="handleNoNewVersion"></update>
	</layout>
</template>

<script setup>
	// 标题
	const title = ref('');

	const messageList = ref([]);

	const isRefreshing = ref(false);

	const countdown = ref(120);

	const contactInfo = ref('');

	const updateRef = ref();

	const version = ref('');

	// 墓位查询
	const handleSearch = () => {
		uni.navigateTo({ url: '/pages/cemetery/query/index' });
	};

	// 管理费续交
	const handleManageFee = () => {
		uni.navigateTo({ url: '/pages/cemetery/manage/index' });
	};

	const getTime = (time) => {
		return UTILUseTimeAgo(time);
	};

	const handleCheckUpdate = () => {
		updateRef.value.checkUpdate();
	};

	const handleHasNewVersion = (res) => {
		version.value = res.version;
	};

	const handleNoNewVersion = (res) => {
		console.log('🚀 ~ handleNoNewVersion ~ res:', res);
	};

	const { remaining, start, stop } = useCountdown(countdown.value, {
		controls: true,
		onComplete: () => {
			refreshData();
			start();
		},
	});

	// 刷新数据
	const refreshData = () => {
		isRefreshing.value = true;
		// 刷新数据
		getMsgList();
		setTimeout(() => {
			isRefreshing.value = false;
		}, 1000);
	};

	// 获取轮播图
	const getBannerList = async () => {
		const { code, rows } = await ApiGetCompanyBanner({
			xslxKey: 'xs',
			tplxKey: 'zzj',
			gsbm: useCompanyStore().GetCurCompanyInfo().bm,
		});
		if (code === 200) {
			useCompanyStore().setBannerList(rows);
		}
	};

	// 获取公告信息
	const getMsgList = async () => {
		const { code, rows } = await ApiGetCompanyMsg({
			fbbm: useCompanyStore().GetCurCompanyInfo().bm,
			pageNum: 1,
			pageSize: 3,
		});

		if (code === 200) {
			messageList.value = rows;
		}
	};

	onLoad(() => {
		// 获取公司信息
		ApiGetCompanyData(useRuntimeConfig().companyType).then(({ code, data }) => {
			console.log('data', data);
			// 保存公司信息
			useCompanyStore().setCurCompanyInfo(data);
			// 设置标题
			title.value = data.bs;

			// 设置联系方式
			if (data.lxdh) contactInfo.value = data.lxdh.split(',');

			// 获取banner和消息列表
			getBannerList();
			getMsgList();
		});
	});

	onMounted(() => {
		start(); // 开始倒计时
	});

	onUnmounted(() => {
		stop(); // 停止倒计时
	});
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f8f9fa;
		background-image: linear-gradient(to bottom, #f8f9fa, #e9ecef);
		padding: 20px;
		position: relative;
		box-sizing: border-box;
	}

	.main {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		position: relative;
		z-index: 2;

		.function-card {
			background: rgba(255, 255, 255, 0.95);
			backdrop-filter: blur(10px);
			border: 1px solid rgba(108, 142, 175, 0.15);
			border-radius: 18px;
			padding: 30px 25px;
			position: relative;
			overflow: hidden;
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05), 0 8px 30px rgba(127, 165, 198, 0.1);
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 4px;
				background: linear-gradient(to right, #7fa5c6, #6c8eaf);
				opacity: 0.3;
			}

			.card-content {
				position: relative;
				z-index: 2;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.icon {
				width: 64px;
				height: 64px;
				margin-bottom: 20px;
				transition: transform 0.3s ease;
			}

			.card-title {
				font-size: 20px;
				color: #495057;
				font-weight: 600;
				margin-bottom: 12px;
				letter-spacing: 1px;
				background: linear-gradient(120deg, #495057, #7fa5c6);
				-webkit-background-clip: text;
				background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.card-desc {
				font-size: 14px;
				color: #868e96;
				text-align: center;
				letter-spacing: 1px;
			}

			.card-decoration {
				position: absolute;
				right: -30px;
				bottom: -30px;
				width: 120px;
				height: 120px;
				background: linear-gradient(135deg, rgba(127, 165, 198, 0.08), rgba(108, 142, 175, 0.12));
				border-radius: 50%;
				transition: transform 0.3s ease;
			}

			.card-shine {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 70%, transparent 100%);
				transform: translateX(-100%);
				transition: transform 0.6s;
			}
		}

		.card-hover {
			transform: translateY(-5px) scale(1.02);
			box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1), 0 12px 40px rgba(127, 165, 198, 0.2);

			.icon {
				transform: scale(1.1);
			}

			.card-decoration {
				transform: scale(1.1) rotate(10deg);
			}

			.card-shine {
				transform: translateX(100%);
			}

			&::before {
				opacity: 0.5;
			}

			.card-title {
				background: linear-gradient(120deg, #7fa5c6, #495057);
				-webkit-background-clip: text;
				background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}

	.notices {
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(10px);
		border: 1px solid rgba(108, 142, 175, 0.15);
		border-radius: 18px;
		padding: 25px;
		margin: 25px 0;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05), 0 8px 30px rgba(127, 165, 198, 0.1);
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 3px;
			background: linear-gradient(to right, transparent, #7fa5c6, transparent);
			opacity: 0.3;
		}

		.notice-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;
			padding-bottom: 15px;
			border-bottom: 1px solid rgba(108, 142, 175, 0.1);
			position: relative;

			.notice-title-wrapper {
				.notice-title {
					font-size: 20px;
					color: #495057;
					font-weight: 600;
					margin-bottom: 4px;
					letter-spacing: 1px;
					position: relative;
					padding-left: 15px;

					&::before {
						position: absolute;
						top: 50%;
						left: 0;
						transform: translateY(-50%);
						content: '';
						display: inline-block;
						width: 3px;
						height: 18px;
						background: linear-gradient(to bottom, #7fa5c6, #6c8eaf);
						border-radius: 3px;
					}
				}

				.notice-subtitle {
					font-size: 12px;
					color: #95a5a6;
					margin-left: 15px;
					letter-spacing: 0.5px;
					opacity: 0.8;
				}
			}

			.refresh-indicator {
				display: flex;
				align-items: center;
				gap: 8px;
				padding: 4px 12px;
				border-radius: 20px;
				background: rgba(127, 165, 198, 0.08);

				.refresh-circle {
					width: 16px;
					height: 16px;
					border: 2px solid rgba(127, 165, 198, 0.3);
					border-top-color: #7fa5c6;
					border-radius: 50%;
					transition: all 0.3s ease;
				}

				.refresh-time {
					font-size: 12px;
					color: #7fa5c6;
				}

				&.refreshing {
					.refresh-circle {
						animation: spin 1s linear infinite;
					}
				}
			}
		}

		.notice-content {
			padding: 5px 5px 5px 0;
			position: relative;

			.notice-item {
				display: flex;
				align-items: center;
				height: 60px;
				padding: 0 15px;
				transition: all 0.3s ease;
				border-radius: 10px;
				margin-bottom: 10px;
				background: rgba(255, 255, 255, 0.6);
				border: 1px solid rgba(108, 142, 175, 0.08);

				&:last-child {
					margin-bottom: 0;
				}

				.notice-tag {
					padding: 4px 10px;
					border-radius: 6px;
					font-size: 12px;
					margin-right: 12px;
					min-width: 52px;
					height: 24px;
					text-align: center;
					font-weight: 500;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-shrink: 0;
					position: relative;

					.tag-dot {
						width: 4px;
						height: 4px;
						border-radius: 50%;
						margin-right: 4px;
						flex-shrink: 0;
					}

					&.notice {
						background: rgba(52, 152, 219, 0.1);
						color: #3498db;
						.tag-dot {
							background: #3498db;
						}

						&::before {
							content: '';
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							height: 3px;
							background: linear-gradient(to right, transparent, #3498db, transparent);
							opacity: 0.3;
						}
					}

					&.activity {
						background: rgba(46, 204, 113, 0.1);
						color: #2ecc71;
						.tag-dot {
							background: #2ecc71;
						}
						&::before {
							content: '';
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							height: 3px;
							background: linear-gradient(to right, transparent, #2ecc71, transparent);
							opacity: 0.3;
						}
					}

					&.remind {
						background: rgba(241, 196, 15, 0.1);
						color: #f1c40f;
						.tag-dot {
							background: #f1c40f;
						}

						&::before {
							content: '';
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							height: 3px;
							background: linear-gradient(to right, transparent, #f1c40f, transparent);
							opacity: 0.3;
						}
					}
				}

				.notice-main {
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 100%;
				}

				.notice-text {
					flex: 1;
					font-size: 14px;
					color: #495057;
					margin-right: 15px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					line-height: 1.4;
				}

				.notice-date {
					font-size: 12px;
					color: #95a5a6;
					white-space: nowrap;
					padding: 2px 8px;
					background: rgba(149, 165, 166, 0.1);
					border-radius: 4px;
					height: 22px;
					line-height: 18px;
					display: flex;
					align-items: center;
					flex-shrink: 0;
				}
			}
		}

		.notice-footer {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 15px;
			margin-top: 10px;

			.notice-line {
				width: 40px;
				height: 1px;
				background: linear-gradient(to right, transparent, rgba(127, 165, 198, 0.3), transparent);
			}

			.notice-dot {
				width: 4px;
				height: 4px;
				border-radius: 50%;
				background: rgba(127, 165, 198, 0.4);
				margin: 0 8px;
			}
		}
	}

	.footer {
		margin-top: 30px;
		padding: 25px;
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(10px);
		border-radius: 18px;
		border: 1px solid rgba(108, 142, 175, 0.15);
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 3px;
			background: linear-gradient(to right, transparent, #7fa5c6, transparent);
			opacity: 0.3;
		}

		.footer-content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
		}

		.contact {
			flex: 1;
			padding-right: 30px;

			.contact-title {
				margin-bottom: 20px;

				.title-text {
					position: relative;
					font-size: 20px;
					color: #495057;
					font-weight: 600;
					display: block;
					margin-bottom: 4px;
					padding-left: 15px;

					&::before {
						position: absolute;
						top: 50%;
						left: 0;
						transform: translateY(-50%);
						content: '';
						display: inline-block;
						width: 3px;
						height: 18px;
						background: linear-gradient(to bottom, #7fa5c6, #6c8eaf);
						border-radius: 3px;
					}
				}

				.title-en {
					font-size: 12px;
					color: #95a5a6;
					opacity: 0.8;
					letter-spacing: 1px;
					padding-left: 15px;
				}
			}

			.contact-info {
				.info-item {
					display: flex;
					align-items: center;
					margin-bottom: 12px;
					padding: 10px 15px;
					background: rgba(127, 165, 198, 0.05);
					border-radius: 10px;
					transition: all 0.3s ease;
					gap: 8px;

					&:hover {
						background: rgba(127, 165, 198, 0.1);
						transform: translateX(5px);
					}

					.info-icon {
						width: 20px;
						height: 20px;
						margin-right: 12px;
						opacity: 0.7;
					}

					.info-text {
						font-size: 14px;
						color: #495057;
						letter-spacing: 0.5px;
					}
				}
			}
		}

		.divider {
			width: 1px;
			height: 100px;
			background: linear-gradient(to bottom, transparent, rgba(108, 142, 175, 0.2), transparent);
			margin: 0 30px;
		}

		.qrcode {
			text-align: center;
			padding: 15px;
			background: rgba(255, 255, 255, 0.8);
			border-radius: 12px;
			border: 1px solid rgba(108, 142, 175, 0.1);
			transition: all 0.3s ease;

			&:hover {
				transform: translateY(-5px);
				box-shadow: 0 8px 20px rgba(127, 165, 198, 0.15);
			}

			.qrcode-img {
				width: 120px;
				height: 120px;
				border-radius: 8px;
				margin-bottom: 10px;
				box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
			}

			.qrcode-text {
				font-size: 14px;
				color: #495057;
				display: block;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					bottom: -4px;
					left: 50%;
					transform: translateX(-50%);
					width: 20px;
					height: 2px;
					background: linear-gradient(to right, transparent, #7fa5c6, transparent);
					opacity: 0.5;
				}
			}
		}
	}

	@keyframes cardPulse {
		0% {
			transform: scale(1);
		}
		50% {
			transform: scale(1.05);
		}
		100% {
			transform: scale(1);
		}
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes refreshItem {
		0% {
			opacity: 1;
			transform: translateX(0);
		}
		20% {
			opacity: 0;
			transform: translateX(-20px);
		}
		40% {
			opacity: 0;
			transform: translateX(20px);
		}
		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@keyframes fadeInRight {
		from {
			opacity: 0;
			transform: translateX(-20px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@keyframes floatUp {
		from {
			opacity: 0;
			transform: translateY(10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes scaleIn {
		from {
			opacity: 0;
			transform: scale(0.9);
		}
		to {
			opacity: 1;
			transform: scale(1);
		}
	}

	.notice-content {
		.notice-item {
			&.refresh-animate {
				animation: refreshItem 0.5s ease forwards, fadeInRight 0.3s ease forwards, floatUp 0.4s ease forwards, scaleIn 0.3s ease forwards;
				animation-delay: 0s, 0.5s, 0.5s, 0.5s;
			}
		}
	}
</style>
